<template>
  <div>
    <Card class="newGridCardClass">
<!--      <div>-->
<!--        {{statisticsShowInfo.grade}}-->
<!--      </div>-->
<!--      <div>-->
<!--        {{statisticsShowInfo.id}}-->
<!--      </div>-->
<!--      <div>-->
<!--        <h1>{{info.name}}</h1>-->
<!--      </div>-->
      <div>
        <h3 style="text-align: center">{{info.name}}</h3>
        <h3 class="title" v-if="parseInt(info.grade)<3">
          <Icon style="color:white" type="ios-albums-outline" />
          <span class="statistics_2">区数</span>：{{areaNum}}</h3>
        <!--              <h3 class="title" v-if="parseInt(TJinfo.grade)<4" v-if="parseInt(TJinfo.grade)===2>-->
        <!--                <Icon style="color: white" type="ios-grid-outline" />-->
        <!--                街&nbsp;&nbsp;&nbsp;道&nbsp;&nbsp;&nbsp;数 ：{{TJstatistics.streetNum}}</h3>-->
        <h3 class="title" v-if="parseInt(info.grade)===2">
          <Icon style="color: white" type="ios-grid-outline" />
          <span class="statistics_3">街道数</span>：112</h3>
        <h3 class="title" v-if="parseInt(info.grade)===3">
          <Icon style="color: white" type="ios-grid-outline" />
          <span class="statistics_3">街道数</span>：{{streetNum}}</h3>
        <h3 class="title" v-if="parseInt(info.grade)<=3">
          <Icon style="color: white" type="ios-grid-outline" />
          <span class="statistics_3">乡镇数</span>：{{xzNum}}</h3>
        <h3 class="title" v-if="parseInt(info.grade)<5">
          <Icon style="color: white" type="md-home" />
          <span class="statistics_3">社区数</span>：{{paintCommunityNum}} / {{communityNum}}</h3>
        <h3 class="title" v-if="parseInt(info.grade)<5">
          <Icon style="color: white" type="md-home" />
          <span class="statistics_2">村数</span>：{{paintCunNum}} / {{cunNum}}</h3>
        <h3 class="title" v-if="parseInt(info.grade)<6 && info.level !== '45'">
          <Icon style="color: white" type="md-grid" />
          <span class="statistics_3">小区-社区</span>：{{communityResidentialNum}}</h3>
        <h3 class="title" v-if="parseInt(info.grade)<6 && info.level !== '40'">
          <Icon style="color: white" type="md-grid" />
          <span class="statistics_3">小区-村</span>：{{cunResidentialNum}}</h3>
        <h3 class="title" v-if="parseInt(info.grade)<6 && info.level !== '45'">
          <Icon style="color: white" type="md-grid" />
          <span class="statistics_3">网格-社区</span>：{{communityGardenNum}}</h3>
        <h3 class="title" v-if="parseInt(info.grade)<6 && info.level !== '40'">
          <Icon style="color: white" type="md-grid" />
          <span class="statistics_3">网格-村</span>：{{cunGardenNum}}</h3>

        <h3 class="title" v-if="parseInt(info.grade)<7">
          <Icon style="color: white" type="ios-paper" />
          <span class="statistics_2">楼栋</span>：{{buildingNum}}</h3>

        <h3 class="title" v-if="parseInt(info.grade)<8 && info.level !== '45'">
          <Icon style="color: white" type="ios-home-outline" />
          <span class="statistics_3">房间-社区</span>：{{doorplateCommunityNum}}</h3>
        <h3 class="title" v-if="parseInt(info.grade)<8 && info.level !== '40'">
          <Icon style="color: white" type="ios-home-outline" />
          <span class="statistics_3">房间-村</span>：{{doorplateCunNum}}</h3>
        <h3 class="title" v-if="parseInt(info.grade)<5">
          <Icon style="color: white" type="ios-home-outline" />
          <span class="statistics_3">房间-总数</span>：{{ parseInt( doorplateCommunityNum ) + parseInt(doorplateCunNum)}}</h3>
        <div v-if="parseInt(info.grade) === 2">
          <h3 class="title" v-if="parseInt(info.grade)<8 && info.level !== '45'">
            <Icon style="color: white" type="md-man" />
            <span class="statistics_3">居民-社区</span>：{{parseInt(userCommunityNum) + 246545}} </h3>
          <h3 class="title" v-if="parseInt(info.grade)<8 && info.level !== '40'">
            <Icon style="color: white" type="md-man" />
            <span class="statistics_3">居民-村</span>：{{userCunNum}}</h3>
          <h3 class="title" v-if="parseInt(info.grade)<5">
            <Icon style="color: white" type="md-man" />
            <span class="statistics_3">居民-总数</span>：{{parseInt(userCommunityNum) + parseInt(userCunNum) + 246545}} </h3>
          <h3 class="title" v-if="parseInt(info.grade)<5">
            <Icon style="color: white" type="md-man" />
            <span class="statistics_3">居民-排重</span>：{{parseInt(distinctUserNum) + 246545}} </h3>
        </div>
        <div v-else>
          <h3 class="title" v-if="parseInt(info.grade)<8 && info.level !== '45'">
            <Icon style="color: white" type="md-man" />
            <span class="statistics_3">居民-社区</span>：{{userCommunityNum}} </h3>
          <h3 class="title" v-if="parseInt(info.grade)<8 && info.level !== '40'">
            <Icon style="color: white" type="md-man" />
            <span class="statistics_3">居民-村</span>：{{userCunNum}}</h3>
          <h3 class="title" v-if="parseInt(info.grade)<5">
            <Icon style="color: white" type="md-man" />
            <span class="statistics_3">居民-总数</span>：{{parseInt(userCommunityNum) + parseInt(userCunNum)}} </h3>
          <h3 class="title" v-if="parseInt(info.grade)<5">
            <Icon style="color: white" type="md-man" />
            <span class="statistics_3">居民-排重</span>：{{distinctUserNum}} </h3>
        </div>
<!--        <h3 class="title" v-if="parseInt(info.grade)<8 && info.level !== '45'">-->
<!--          <Icon style="color: white" type="md-man" />-->
<!--          <span class="statistics_4">实际居住户数-社区:{{actualResidenceNumCommunity}}</span></h3>-->
<!--        <h3 class="title" v-if="parseInt(info.grade)<8 && info.level !== '40'">-->
<!--          <Icon style="color: white" type="md-man" />-->
<!--          <span class="statistics_4">实际居住户数-村:{{actualResidenceNumCun}}</span></h3>-->
      </div>
    </Card>
  </div>
</template>

<script>
import { getResidentialNum, newGetGridInfoByID } from '../../../../api/z-new-grid'
import { getDistInctUserNum } from '../../../../api/eventlist'
import {
  getActualResidenceNumCommunity, getActualResidenceNumCun,
  getBuildingNum,
  getDoorplateNumCommunity,
  getDoorplateNumCun, getGardenNum, getOfficeStatistics,
  getUserNumCommunity,
  getUserNumCun
} from '../../../../api/grid-statistics'

export default {
  name: 'statisticsInfo',
  props: {
    statisticsShowInfo: {
      type: Object
    }
  },
  data () {
    return {
      info: {},
      severUserInfo: {},
      areaNum: 0,
      streetNum: 0,
      communityNum: 0,
      cunNum: 0,
      xzNum: 0,
      paintCommunityNum: 0,
      paintCunNum: 0,
      communityGardenNum: 0,
      cunGardenNum: 0,
      buildingNum: 0,
      doorplateCommunityNum: 0,
      doorplateCunNum: 0,
      userCommunityNum: 0,
      userCunNum: 0,
      distinctUserNum: 0,
      cunResidentialNum: 0,
      communityResidentialNum: 0,
      actualResidenceNumCommunity: 0,
      actualResidenceNumCun: 0
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
  },
  methods: {
    getGridInfoByID () {
      let data = {
        grade: this.statisticsShowInfo.grade,
        id: this.statisticsShowInfo.id
      }
      newGetGridInfoByID(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.info = ret.data.data
          this.init(this.info.grade, this.info.id)
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    init (e1, e2) {
      this.getOfficeStatistics(e1, e2)
      this.getResidentialNum(e1, e2)
      this.getGardenNum(e1, e2)
      this.getBuildingNum(e1, e2)
      if (parseInt(e1) < 5) {
        this.getDistInctUserNum(e1, e2)
      }
      if (this.info.level !== '45') {
        this.getDoorplateNumCommunity(e1, e2)
        this.getUserNumCommunity(e1, e2)
        this.getActualResidenceNumCommunity(e1, e2)
      }
      if (this.info.level !== '40') {
        let _this = this
        setTimeout(function () {
          if (_this.cunGardenNum === 0) {
            console.log(111)
            _this.doorplateCunNum = 0
            _this.userCunNum = 0
            _this.actualResidenceNumCun = 0
          } else {
            console.log(222)
            _this.getDoorplateNumCun(e1, e2)
            _this.getUserNumCun(e1, e2)
            _this.getActualResidenceNumCun(e1, e2)
          }
        }, 2000)
      }
    },
    getActualResidenceNumCommunity (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      getActualResidenceNumCommunity(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.actualResidenceNumCommunity = ret.data.data.num
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    getActualResidenceNumCun (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      getActualResidenceNumCun(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.actualResidenceNumCun = ret.data.data.num
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    getResidentialNum (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      getResidentialNum(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.communityResidentialNum = ret.data.data.communityResidentialNum
          this.cunResidentialNum = ret.data.data.cunResidentialNum
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    getDistInctUserNum (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      getDistInctUserNum(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.distinctUserNum = ret.data.data.num
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    getUserNumCommunity (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      getUserNumCommunity(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.userCommunityNum = ret.data.data.num
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    getUserNumCun (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      getUserNumCun(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.userCunNum = ret.data.data.num
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    getDoorplateNumCun (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      getDoorplateNumCun(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.doorplateCunNum = ret.data.data.num
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    getDoorplateNumCommunity (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      getDoorplateNumCommunity(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.doorplateCommunityNum = ret.data.data.num
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    getBuildingNum (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      getBuildingNum(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.buildingNum = ret.data.data.buildingNum
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    getGardenNum (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      getGardenNum(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.communityGardenNum = ret.data.data.communityGardenNum
          this.cunGardenNum = ret.data.data.cunGardenNum
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    },
    getOfficeStatistics (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      getOfficeStatistics(data).then(ret => {
        if (ret.data.errcode === 0) {
          let result = ret.data.data
          this.info = result.info
          this.areaNum = result.areaNum
          this.streetNum = result.streetNum
          this.communityNum = result.communityNum
          this.cunNum = result.cunNum
          this.xzNum = result.xzNum
          this.paintCommunityNum = result.paintCommunityNum
          this.paintCunNum = result.paintCunNum
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    }
  },
  watch: {
    'statisticsShowInfo.id': function (newV, oldV) {
      if (newV !== oldV) {
        this.getGridInfoByID()
      }
    }
  }
}
</script>

<style scoped>
.newGridCardClass{
  width: 250px;
  position: absolute;
  top: 23%;
  right: 20px;
  z-index: 1000;
  background-color: #235CA7;
  /*opacity: 0.7;*/
  color: white;
  font-size: 16px;
}
.statistics_2{
  letter-spacing: 20px;
  margin-left: 5px;
  font-size: 14px
}
.statistics_3{
  letter-spacing: 8px;
  margin-left: 5px;
  font-size: 14px
}
.statistics_4{
  letter-spacing: 2px;
  margin-left: 5px;
  font-size: 14px
}
.title{
  font-size: 14px;
}
</style>
